{extend name="public/base" /}
{block name="style"}
<link href="__STATIC__/libs/webuploader/css/webuploader.css" type="text/css" rel="stylesheet">
<style type="text/css">
/*tab*/
.nav-tabs-custom>.nav-tabs>li:first-of-type.active>a{border-left-color:#e0e0e0;}
.nav-tabs{background: none;border-bottom: 2px solid #eee;}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{border:none;color:#5db2ff;}
.nav-tabs>li>a, .nav-tabs>li>a:focus, .nav-tabs>li>a:hover{border:none;color: #666;}
.nav-tabs>li.active{border-bottom:none;border-right: 1px solid #f4f4f4;}
.nav-tabs>li>a{font-weight: 500;}
/*个人资料*/
.profile-username{font-size: 16px;color: #666;}
	/*上传个人图像*/
.upload-avatar-box{display: block;margin-top: 20px;width: 135px;height: 130px;line-height: 120px;}
.upload-avatar-box img{max-height: 120px;max-width: 125px;}
</style>
{/block}
{block name="main"}

      <div class="row profile-wrap">
        <div class="col-md-3">

          <!-- Profile Image -->
          <div class="box box-info">
            <div class="box-body box-profile">
              <img class="profile-user-img img-responsive img-circle" src="{$user_info.avatar}" alt="用户头像">

              <h3 class="profile-username text-center">{$user_info.nickname}</h3>

              <p class="text-muted text-center">{volist name="user_info.auth_group" id="auth_group"}{$auth_group} {/volist}</p>

<!--               <ul class="list-group list-group-unbordered">
                <li class="list-group-item">
                  <b>粉丝</b> <a class="pull-right">1,322</a>
                </li>
                <li class="list-group-item">
                  <b>关注</b> <a class="pull-right">543</a>
                </li>
                <li class="list-group-item">
                  <b>朋友</b> <a class="pull-right">13,287</a>
                </li>
              </ul> -->

       <!--        <a href="#" class="btn btn-primary btn-block"><b>关注</b></a> -->
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->

          <!-- About Me Box -->
          <div class="box box-info">
            <div class="box-header with-border">
              <h3 class="box-title">关于我</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <strong><i class="fa fa-book margin-r-5"></i> 邮箱</strong>

              <p class="text-muted mt-10 ml-20">
                {$user_info.email}
              </p>

              <hr>

<!--               <strong><i class="fa fa-map-marker margin-r-5"></i> 地区</strong>

              <p class="text-muted mt-10 ml20">Malibu, California</p>

              <hr>

              <strong><i class="fa fa-pencil margin-r-5"></i> 技能</strong>
              <p class="text-muted mt-10"> 
                <span class="label label-danger">UI Design</span>
                <span class="label label-success">Coding</span>
                <span class="label label-info">Javascript</span>
                <span class="label label-warning">PHP</span>
                <span class="label label-primary">Node.js</span>
              </p>

              <hr> -->

              <strong><i class="fa fa-file-text-o margin-r-5"></i> 个人描述</strong>
              <p class="text-muted mt-10 ml20">{$user_info.description}</p>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
        <div class="col-md-9">
          <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
              <li class="active"><a href="#settings" data-toggle="tab" aria-expanded="false">个人设置</a></li>
            </ul>
            <div class="tab-content">
              
              <!-- /.tab-pane -->
              <div class="tab-pane active" id="settings">
          <form action="{:url('admin/User/profile',['uid'=>$user_info['uid']])}" method="post" class="form-builder form-horizontal">
            <fieldset>
		          <input type="hidden" id="uid" name="uid" value="1">
		          <div class="form-group item_nickname ">
				        <label for="nickname" class="col-md-3 control-label">昵称<sup>*</sup></label>
				        <div class="col-md-4">
					        <input type="text" class="form-control" name="nickname" value="{$user_info.nickname}">
				        </div>

				       </div>
				       <div class="form-group item_username ">
				        <label for="username" class="col-md-3 control-label">用户名<sup>*</sup></label>
				        <div class="col-md-4">
					        <input type="text" class="form-control" name="username" value="{$user_info.username}">
				        </div>
				  
				       </div>
				      <div class="form-group item_email ">
				        <label for="email" class="col-md-3 control-label">邮箱<sup>*</sup></label>
				        <div class="col-md-4">
					        <div class="input-group">
					        	<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
						        <input type="email" class="form-control" name="email" value="{$user_info.email}" placeholder="填写Email">
					        </div>
				        </div>
				        </div>
				        <div class="form-group item_mobile ">
				        <label for="mobile" class="col-md-3 control-label">手机号</label>
				        <div class="col-md-4">
				        	<div class="input-group">
				        		<span class="input-group-addon"><i class="fa fa-phone"></i></span>
					        	<input type="number" class="form-control" name="mobile" value="{$user_info.mobile}" placeholder="填写手机号">
					        </div>

				        </div>
				        </div>
						   <div class="form-group item_sex ">
						   <label for="sex" class="col-md-3 control-label">性别</label>
						    <div class="col-md-6">
				          <div class="oh mb-10 pl-5">
                      <div class="radio radio-primary fl mr-10">
                        <label for="sex0">
                          <input type="radio" name="sex" id="sex0" value="0">&nbsp;保密</label>
                      </div>
                      <div class="radio radio-primary fl mr-10">
                        <label for="sex1">
                          <input type="radio" name="sex" id="sex1" value="1" checked="">&nbsp;男</label>
                      </div>
										  <div class="radio radio-primary fl mr-10">
                        <label for="sex2"><input type="radio" name="sex" id="sex2" value="2">&nbsp;女</label>
                      </div>
                    </div>
                </div>
          </div>   
         <div class="form-group item_description ">
          <label for="description" class="col-md-3 control-label">个人说明</label>
          <div class="col-md-6">
          	<textarea name="description" class="form-control" length="120" rows="5">{$user_info.description}</textarea>
          </div>
          </div>
        <div class="row">
    		  <input type="hidden" id="ismore_avatar" value="single">
          <div class="form-group controls item_avatar ">
          <label for="avatar" class="col-md-3 control-label">头像<sup>*</sup></label>
          <div class="col-md-6" style="padding-bottom: 5px;"><span class="btn btn-info ml-10 btn-sm" id="upload_avatar_avatar"><i class="fa fa-upload"></i> 上传头像</span><span class="color-red f12 ml-10">用户头像默认随机分配</span>      
              <input class="attach" type="hidden" id="avatar" name="avatar" value="{$user_info.avatar}">

      	        <div class="upload-avatar-box tc popup-avatar img-thumbnail pr">
      	            <div class="each">
      	            <i data-avatarid="avatar" class="removeAvatar fa fa-times-circle remove-attachment"></i> 
      	             
      	                <a href="{$user_info.avatar|root_full_path}" title="点击查看大图">
      	                    <img src="{$user_info.avatar|root_full_path}">
      	                </a>           
      	         		</div>
      	        </div>
              </div>
              </div>
        	</div>
    
             <hr>
              <div class="form-group">
                  <div class="col-md-10 col-md-offset-3 mt-10 tc">
                     <div class="col-md-3">
                          <button class="btn btn-block btn-primary submit ajax-post " type="submit" target-form="form-builder">确定</button>
                      </div>
                      <div class="col-md-3">
                          <button onclick="javascript:history.back(-1);return false;" class="btn btn-block btn-default return">返回</button>
                      </div>
                </div>
            </div>

           </fieldset>
	        </form>
              </div>
              <!-- /.tab-pane -->
            </div>
            <!-- /.tab-content -->
          </div>
          <!-- /.nav-tabs-custom -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->

{/block}

{block name="script"}
<script type="text/javascript" charset="utf-8" src="__STATIC__/libs/webuploader/js/webuploader.js"></script>
<script>
//本地上传(分开写为了好控制)
$(function () {
        var uploader_avatar= WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: true,
            duplicate: true,// 同一文件是否可以重复上传
            // swf文件路径
            swf: '__STATIC__/libs/webuploader/Uploader.swf',
            // 文件接收服务端。
            server: "{:url('admin/attachment/uploadAvatar',['uid'=>$user_info['uid']])}",
            //验证文件总数量, 超出则不允许加入队列
            fileNumLimit: 5,
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false, 
            // 验证单个文件大小是否超出限制, 超出则不允许加入队列 
            fileSingleSizeLimit:2*1024*1024,  
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.

            //选择文件的按钮
            pick: '#upload_avatar_avatar',
            // 只允许选择图片文件
            accept:{title:'Images',extensions:'gif,jpg,jpeg,bmp,png',mimeTypes:'image/*'}
        });
        uploader_avatar.on('fileQueued', function (file) {
            uploader_avatar.upload();
        });
        /*上传成功**/
        uploader_avatar.on('uploadSuccess', function (file, result) {console.debug(result);
            if (result.code) {
                var data = result.data;
                $("[name='avatar']").val(data.path);
                $("[name='avatar']").parent().find('.popup-avatar').html(
                          '<div class="each"><i data-avatarid="avatar" class="removeAvatar fa fa-times-circle remove-attachment"></i><a href="'+data.url+'" title="点击查看大图片"><img src="'+data.url+'"></a><div class="text-center opacity del_btn" ></div></div>'
                    );

                uploader_avatar.reset();
            } else {
                updateAlert(result.msg);
                setTimeout(function () {
                    $(this).removeClass('disabled').prop('disabled', false);
                }, 1500);
            }
        });
        //移除头像
        $('body').on('click','.removeAvatar', function() {
                 var avatarid=$(this).attr('data-avatarid');
                $("#"+avatarid).val('');
                $('.popup-avatar').html('');
            })
    })

</script>
{/block}
